<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
            <el-form-item prop="name">
                <el-input v-model="searchForm.name" clearable placeholder="发放名称"></el-input>
            </el-form-item>
            <el-form-item prop="messageNotice">
              <el-select filterable clearable v-model="searchForm.messageNotice" placeholder="是否短信通知">
                <el-option label="是" value="1" ></el-option>
                 <el-option label="否" value="0" ></el-option>
              </el-select>
            </el-form-item>
           <el-form-item prop="type">
             <el-select filterable clearable v-model="searchForm.type" placeholder="劵类型">
                <el-option :label="item.name" :value="item.typeId" v-for="item in typeList"></el-option>
             </el-select>
           </el-form-item>
            <el-form-item prop="createTime">
              <el-date-picker v-model="createTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="创建开始日期" end-placeholder="创建结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="sendTime">
              <el-date-picker v-model="sendTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="发送开始日期" end-placeholder="发送结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
             <el-button type="primary" @click="handleAdd()" size="small"  icon="el-icon-plus" v-has="'operatingTools:sendCouponAllocation:add'">发放配置</el-button>
          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
              <!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight" @selection-change="handleSelectionChange"  stripe v-loading="loading">

            <el-table-column prop="code" label="发放编号" v-if="!hideTableColumn.includes('code')" width="160" align="center"></el-table-column>
            <el-table-column prop="name" label="发放券名称" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
            <el-table-column prop="typeText" label="消费券类型" v-if="!hideTableColumn.includes('type')" align="center" width="120"></el-table-column>
            <el-table-column prop="amount" label="发放金额" v-if="!hideTableColumn.includes('money')" align="center"></el-table-column>
            <!-- <el-table-column prop="leveName" label="用户配置" v-if="!hideTableColumn.includes('remork')" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.giveUserScope=='0'"> <span v-for="item in scope.row.giveUserScope">{{item.telephone}}{{(index == scope.row.giveUserScope.length-1)?'':'丶'}}</span></div>
                <div v-else-if="scope.row.giveUserScope=='1'">{{scope.row.userTimeStart}}至{{scope.row.userTimeEnd}}期间用户</div>
                <div v-else-if="scope.row.giveUserScope=='2'">系统所有用户</div>
              </template>
            </el-table-column> -->
            <el-table-column prop="messageNotice" label="是否短信通知" v-if="!hideTableColumn.includes('time')" align="center" width="140">
              <template slot-scope="scope">
                <span>{{ scope.row.messageNotice=='0'?'否':"是" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="giveTime" label="发放时间" v-if="!hideTableColumn.includes('createTime')" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" v-if="!hideTableColumn.includes('createTime')" align="center" width="180"></el-table-column>

            <el-table-column prop="name" label="操作"  width="150" v-if="!hideTableColumn.includes('active')" align="center" fixed="right">
              <template #default="scope">
                <div class="verticalBtn">
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.row)"
                    v-has="'operatingTools:sendCouponAllocation:edit'"
                     v-if="scope.row.status!='1'"
                  >修改</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-circle-check"
                    @click="handleSureGrant(scope.row)"
                    v-has="'operatingTools:sendCouponAllocation:sure'"
                    v-if="scope.row.status!='1'"
                  >确定发放</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-delete-solid"
                    @click="handleDelt(scope.row)"
                    v-has="'operatingTools:sendCouponAllocation:delt'"
                  >删除</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                    v-has="'operatingTools:sendCouponAllocation:view'"
                  >查看配置</el-button>
                  <el-button
                    size="medium"
                    type="text"
                    icon="el-icon-user-solid"
                    @click="handleIssuer(scope.row)"
                    v-has="'operatingTools:sendCouponAllocation:yesPerson'"
                  >已发放人</el-button>

                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
              v-show="total"
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>

    <!-- 发放配置 -->
    <el-dialog :title="dialogTitle" width="1200px" v-dialogDrag :visible.sync="addVisible" @close="addVisible = false" :close-on-click-modal="false">
      <el-form  :model="couponForm" id="userDialog" status-icon :rules="couponRules" ref="couponForm" label-position="right" >
       <el-form-item label="发放券名称" prop="name" label-width="125px" >
          <el-input type="text" v-model="couponForm.name" autocomplete="off"  maxlength="3" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="消费券配置" prop="couponConfigId" label-width="125px" >
          <span style="color:#61997A;cursor: pointer;" @click="handleSelectCoupon">请选择消费券配置</span>
        </el-form-item>
        <el-form-item label="发放金额"  label-width="125px" >
            <span v-if="!couponForm.couponConfigId">0.00</span>
            <span v-else>
              {{couponForm.couponConfigName}}:{{couponForm.couponConfigAmount}}
            </span>
         </el-form-item>
        <el-form-item label="用户配置" prop="giveUserScope" label-width="125px" >
            <el-radio-group v-model="couponForm.giveUserScope">
               <el-radio :label="0">指定手机号</el-radio>
               <el-radio :label="1">指定日期</el-radio>
               <el-radio :label="2">给系统所有用户发放消费券</el-radio>
             </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号" prop="userIdsStr" label-width="125px" v-if="couponForm.giveUserScope=='0'">
            <el-select
                style="width: 100%;"
                v-model="couponForm.userIdsStr"
                multiple
                filterable
                remote
                reserve-keyword
                :remote-method="remoteMethod"
                :loading="inputLoading"
                placeholder="请选择手机号">
                <el-option
                  v-for="item in phoneList"
                  :key="item.customerId"
                  :label="item.telephone"
                  :value="item.customerId">
                   <span style="float: left">{{ item.telephone }}</span><span style="float: left" v-show="item.fullname">({{item.fullname}}) </span>
                </el-option>
              </el-select>
           <!-- <el-input type="textarea" v-model="couponForm.userIdsStr" autocomplete="off"  rows="6"></el-input> -->
        </el-form-item>
        <el-form-item label="指定日期" prop="time" label-width="125px" v-if="couponForm.giveUserScope=='1'">
           <el-date-picker v-model="couponForm.time" type="daterange" align="right" unlink-panels range-separator="至"
             start-placeholder="指定开始日期" end-placeholder="指定结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
             :picker-options="pickerOptions">
           </el-date-picker>
        </el-form-item>
        <el-form-item label="是否短信通知" prop="messageNotice" label-width="125px" >
            <el-radio-group v-model="couponForm.messageNotice">
               <el-radio :label="1">是</el-radio>
               <el-radio :label="0">否</el-radio>
             </el-radio-group>
        </el-form-item>
        <el-form-item label="短信模版ID" prop="messageTemplateId" label-width="125px" v-if="couponForm.messageNotice==1">
           <el-input type="text" v-model="couponForm.messageTemplateId" autocomplete="off"  placeholder="短信模版ID"></el-input>
         </el-form-item>
        <el-form-item label="发放备注" prop="remark" label-width="125px" >
            <el-input type="textarea" v-model="couponForm.remark" autocomplete="off"  placeholder="发放备注" rows="4"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogTitle!='查看发放配置'">
        <el-button @click="addVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="couponSubmit('couponForm')" size="small" :loading="btnLoading">保 存</el-button>
      </div>

      <!-- 选择发放金额 -->
      <el-dialog title="选择发放金额" width="900px" v-dialogDrag :visible.sync="couponVisible" @close="couponVisible = false" append-to-body>
          <div class="search">
            <el-form :inline="true" :model="searchDialogForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
              <el-form-item prop="name">
                  <el-input v-model="searchDialogForm.name" clearable placeholder="配置名称"></el-input>
              </el-form-item>
              <el-form-item prop="type">
                <el-select filterable clearable v-model="searchDialogForm.type" placeholder="劵类型">
                  <el-option :label="item.name" :value="item.typeId" v-for="item in typeList"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="createTime">
                <el-date-picker v-model="createDialogTime" type="daterange" align="right" unlink-panels range-separator="至"
                  start-placeholder="创建开始日期" end-placeholder="创建结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="clearfix">
                <el-button type="primary" @click="handleDialogSearch()" icon="el-icon-search">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="couponList" style="width: 100%;"  border   stripe v-loading="tableLoading">
            <el-table-column prop="id" label="编号"  width="120" align="center"></el-table-column>
            <el-table-column prop="name" label="消费券配置名称"  align="center"></el-table-column>
            <el-table-column prop="typeText" label="券类型"  align="center"></el-table-column>
            <el-table-column prop="amount" label="金额(元)" align="center"></el-table-column>
            <el-table-column prop="orderNumber" label="发放后有效期" align="center">
              <template #default="scope">
                <span v-if="scope.row.expireType=='1'">{{scope.row.expireValue}}天后自动延长</span>
                <span v-else-if="scope.row.expireType=='2'">{{scope.row.expireValue}}天后到期无效</span>
                <span v-else-if="scope.row.expireType=='3'">{{scope.row.expireValue}}到期后无效</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期" align="center"></el-table-column>
            <el-table-column prop="telephone" label="操作" align="center">
              <template #default="scope">
                 <el-button type="primary" @click="hadleSureCoupon(scope.row)" size="small" :loading="btnLoading">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <MyPagination
              :total="couponTotal"
              :page.sync="searchDialogForm.pageNum"
              :limit.sync="searchDialogForm.pageSize"
              @pagination="couponDataInfo"
            />
          </div>
      </el-dialog>

    </el-dialog>


    <!-- 已发放人 -->
    <el-dialog title="已发放人" width="900px" v-dialogDrag :visible.sync="issuerVisible" @close="issuerVisible = false">
        <div style="text-align:center;padding-bottom: 10px;font-size: 16px;">发放名称为：<span style="color:red">{{statusRow.name}}</span>发放人信息</div>
        <el-table :data="issuerList" style="width: 100%;"  border   stripe v-loading="tableLoading">
          <el-table-column type="index" label="序号"  width="60" align="center"></el-table-column>
          <el-table-column prop="nickname" label="用户名"  align="center"></el-table-column>
          <el-table-column prop="telephone" label="用户手机号"  align="center"></el-table-column>
          <el-table-column prop="telephone" label="发送状态" align="center">
            <template #default="scope">
              <el-button v-if="scope.row.giveStatus=='0'" type="success" plain size="small">待发放</el-button>
              <el-button v-else-if="scope.row.giveStatus=='1'" type="success" plain size="small">成功</el-button>
              <el-button v-else-if="scope.row.giveStatus=='2'" type="success" plain size="small">失败</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <MyPagination
            :total="issuerTotal"
            :page.sync="issuerForm.pageNum"
            :limit.sync="issuerForm.pageSize"
            @pagination="issuerDataInfo"
          />
        </div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    grantCoupon,couponGiveConfigAdd,couponGiveConfigDel,couponGiveConfigDetail,couponGiveConfigEdit,couponGiveConfigList,couponGiveConfigUserList,couponConfigList,customerList
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        inputLoading:false,
        createTime:[],
        sendTime:[],
        typeList:[],
        searchForm: {
          nickname: '',
          realState: '',
          tagIds: '',
          telephone:'',
          unionCode:'',
          userName:'',
          levelId:'',

          pageNum: 1,
          pageSize: 20,
        },
        dataList:[],
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        typeList:[{name:'1',val:'1'}],//消费券类型
        tableHeight:0,//table 高度
        dialogTitle:'',
        addVisible:false,
        issuerList:[],
        couponConfigRowStatus:{},//选中的消费券配置信息
        couponForm:{
          id:'',
          couponConfigId:'',//消费券配置id
          couponConfigName:'',
          couponConfigAmount:'',

          name:'',
          messageTemplateId:"",
          messageNotice:'',
          time:[],
          userIdsStr:'',
          giveUserScope:'',

          remark:'',
        },
        couponRules: {
         name: [{required: true, message: '请输入发放券名称',trigger: 'blur'}],
         couponConfigId: [{required: true, message: '请选择消费券类型',trigger: 'blur'}],
         giveUserScope: [{required: true, message: '请选择用户配置',trigger: 'blur'}],
         userIdsStr: [{required: true, message: '请输入手机号',trigger: 'blur'}],
         time: [{required: true, message: '请选择指定时间',trigger: 'blur'}],
         messageNotice: [{required: true, message: '请选择是否短信通知',trigger: 'blur'}],
         messageTemplateId: [{required: true, message: '请输入短信模板ID',trigger: 'blur'}],
         remark: [{required: true, message: '请输入发放备注',trigger: 'blur'}],
        },

        issuerVisible:false,
        tableLoading:false,

        issuerForm: {
          couponGiveConfigId:'',
          pageNum: 1,
          pageSize: 20,
        },
        statusRow:{},
        issuerTotal: 0,

        phoneList:[],
        createDialogTime:[],
        searchDialogForm:{
          name:'',
          type:'',
          status:'1',
          pageNum:1,
          pageSize:20
        },
        couponTotal:0,
        couponList:[],
        couponVisible:false
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.getSelect();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      remoteMethod(query) {
        if (query !== '') {
          this.inputLoading = true;
          customerList({pageNum: 1,pageSize: 50,telephone:query}).then(res=>{
            this.phoneList = res.rows;
            this.inputLoading = false;
          })
          // setTimeout(() => {
          //   this.loading = false;
          //   this.options = this.list.filter(item => {
          //     return item.label.toLowerCase()
          //       .indexOf(query.toLowerCase()) > -1;
          //   });
          // }, 200);
        } else {
          this.options = [];
        }
      },
      handleView(row){
        couponGiveConfigDetail({id:row.id}).then((result) => {
           if (result.code == '200') {
              this.dialogTitle = '查看发放配置';
              let time = [];
              let row = result.data;
              if(row.userTimeEnd){
               time.push((row.userTimeStart).substring(0,10));
               time.push((row.userTimeEnd).substring(0,10));
              }
              let phone = [];
              if(row.giveConfigUserList){
                for(let i=0;i<row.giveConfigUserList.length;i++){
                  phone.push(row.giveConfigUserList[i].telephone)
                }
              }

              this.couponForm = {
                id:row.id,
                couponConfigId:row.couponConfigId,
                couponConfigName:row.typeText,
                couponConfigAmount:row.amount,

                name:row.name,
                messageTemplateId:row.messageTemplateId,
                messageNotice:row.messageNotice,
                time:time,
                userIdsStr:phone,
                giveUserScope:row.giveUserScope,

                remark:row.remark
              }
               this.addVisible = true;

            }else{
               this.$message.error(result.msg);
            }
        });
      },
      hadleSureCoupon(row){
        this.couponForm.couponConfigId = row.id;
        this.couponForm.couponConfigName = row.typeText;
        this.couponForm.couponConfigAmount = row.amount;
        this.couponConfigRowStatus = row;
        this.couponVisible = false;
      },
      handleSelectCoupon(){
        this.couponDataInfo();
        this.couponVisible = true;
      },
      handleIssuer(row){
        this.statusRow = row;
        this.issuerForm.couponGiveConfigId = row.id
        this.issuerDataInfo();
        this.issuerVisible = true;
      },
      resetSearch(){
        this.createTime = [];
        this.sendTime = [];
        this.resetForm('searchForm');
        this.dataInfo();
      },
      async issuerDataInfo(){/* 发放人配置列表 */
        try {

          this.tableLoading = true;
          const result = await couponGiveConfigUserList(this.issuerForm);
          if (result.code == 200) {
            this.issuerTotal = result.total;
            this.issuerList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.tableLoading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      imageChange(path, name) {
        this.couponForm[name] = path
      },
      /** 消费券配置提交 **/
      couponSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnLoading = true;
            let form = JSON.parse(JSON.stringify(this.couponForm));
            if(form.time.length){
              form.userTimeStart = form.time[0]+' 00:00:00';
              form.userTimeEnd = form.time[1]+' 00:00:00';
            }
            if(form.userIdsStr){
               form.userIdsStr = form.userIdsStr.join(',');
            }
            if(form.id){
                couponGiveConfigEdit(form).then((result) => {
                  if (result.code == 200) {
                    this.$message.success(result.msg);
                    this.addVisible = false;
                    this.dataInfo();
                  } else {
                    this.$message.error(result.msg);
                  }
                  this.btnLoading = false;
                });
            }else{
              couponGiveConfigAdd(form).then((result) => {
                if (result.code == 200) {
                  this.$message.success(result.msg);
                  this.addVisible = false;
                  this.dataInfo();
                } else {
                  this.$message.error(result.msg);
                }
                this.btnLoading = false;
              });
            }

          }
        })
      },
      /** 数据初始化请求动态列表数据 **/
      getSelect(){
        this.getCategoryDetails({categoryKey:'category_coupon'}).then(res=>{
          this.typeList = res.data;
        })


      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.createTime, 'createTimeStart', 'createTimeEnd');
          data = this.addDateRange(this.searchForm, this.sendTime, 'giveTimeStart', 'giveTimeEnd');
          this.loading = true;
          const result = await couponGiveConfigList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      async couponDataInfo(){
        try {
          let data = this.addDateRange(this.searchDialogForm, this.createDialogTime, 'createTimeStart', 'createTimeEnd');
          this.loading = true;
          const result = await couponConfigList(data);
          if (result.code == 200) {
            this.couponTotal = result.total;
            this.couponList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },
      handleDialogSearch(){
        this.searchDialogForm.pageNum= 1;
        this.couponDataInfo();
      },
      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      handleSureGrant(row){/*确定发放*/
          this.$confirm(`您确定要将编号为${row.code}进行发放消费券吗？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            grantCoupon({id:row.id}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },
      /** 删除当前列 **/
      handleDelt(row){
          this.$confirm('您确定要删除吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            couponGiveConfigDel({id:row.id}).then((result) => {
              if (result.code == '200') {
                   this.dataInfo();
                   this.$message({
                     message: result.msg,
                     type: 'success'
                   });
               }else{
                  this.$message.error(result.msg);
               }
           });
          }).catch((err) => {
              console.log(err);
          });
      },

      /** 添加配置 **/
      handleAdd(){
        this.dialogTitle = '发放配置';
        this.couponForm = {
          id:'',
          couponConfigId:'',
          couponConfigName:'',
          couponConfigAmount:'',

          name:'',
          messageTemplateId:"",
          messageNotice:'',
          time:[],
          userIdsStr:'',
          giveUserScope:'',

          remark:'',
        }
        this.addVisible = true;
      },
      handleEdit(row){
        couponGiveConfigDetail({id:row.id}).then((result) => {
           if (result.code == '200') {
              this.dialogTitle = '修改发放配置';
              let time = [];
              let row = result.data;
              if(row.userTimeEnd){
                time.push((row.userTimeStart).substring(0,10));
                time.push((row.userTimeEnd).substring(0,10));
                console.log(time)
              }
              let phone = [];
              if(row.giveConfigUserList){
                for(let i=0;i<row.giveConfigUserList.length;i++){
                  phone.push(row.giveConfigUserList[i].telephone)
                }
              }
              this.couponForm = {
                id:row.id,
                couponConfigId:row.couponConfigId,
                couponConfigName:row.typeText,
                couponConfigAmount:row.amount,

                name:row.name,
                messageTemplateId:row.messageTemplateId,
                messageNotice:row.messageNotice,
                time:time,
                userIdsStr:phone,
                giveUserScope:row.giveUserScope,

                remark:row.remark
              }
               this.addVisible = true;

            }else{
               this.$message.error(result.msg);
            }
        });

      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
